import React, {FC, useEffect, useRef, useState} from "react";
import {useHistory} from "react-router-dom";
import {Card, Row, Col, Flex, Space, Typography} from 'antd';
import * as echarts from 'echarts';
import "./index.less"
import comment from "@/static/image/comment.png"
import pageview from "@/static/image/pageview.png"
import article from "@/static/image/article.png"
import usernumber from "@/static/image/usernumber.png"
import moment from "moment"
import {getRandomArray} from "@/plugins";

type EChartsOption = echarts.EChartsOption;

const {Paragraph, Title} = Typography;

const ArticleList: FC = (props: any) => {
    console.log(props, "props")
    const history = useHistory();
    const [count, setCount] = useState(0);

    let [numStatistics, setNumStatistics] = useState([
        {
            title: "用户数量",
            value: 103,
            img: usernumber
        },
        {
            title: "文章数量",
            value: 103,
            img: article
        },
        {
            title: "评论数量",
            value: 103,
            img: comment
        },
        {
            title: "访问数量",
            value: 103,
            img: pageview
        }
    ])

    let articlePv = useRef<HTMLDivElement | null>(null);
    let visitorPv = useRef<HTMLDivElement | null>(null);

    function goto() {
        history.push('/home/active')
    }

    function chartsInit() {
        // 图表初始化显示
        chartArticlePv();
        chartVisitorPv();
    }

    const getNextSevenDays = () => {
        let days = [];
        for (let i = 0; i < 7; i++) {
            // 使用 moment 获取当前日期，并加上偏移量 i 天
            days.push(moment().add(i, 'days').format('MM-DD')); // 格式化为日期字符串
        }
        return days;
    };


    function chartArticlePv() {
        // 最近七天文章访问量展示
        let myChart = echarts.init(articlePv.current);
        let option: EChartsOption;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '访问数量',
                    type: 'bar',
                    barWidth: '30',
                    itemStyle: {
                        borderRadius: [2, 2, 0, 0],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, // 表示渐变方向，从上到下
                            [
                                {offset: 1, color: '#ffbfbf'},
                                // {offset: 0.5, color: '#ff8080'},
                                {offset: 0, color: '#f3ae59'},

                            ]
                        )
                    },
                    data: [10, 52, 200, 334, 390, 330, 220]
                }
            ]
        };

        option && myChart.setOption(option, true);
    }
    // 最近七天的访问量
    function chartVisitorPv() {
        var myChart = echarts.init(visitorPv.current)
        var option

        option = {
            xAxis: {
                type: 'category',
                data: getNextSevenDays()
            },
            grid: {
                left: '10%',
                top: '15%',
                right: '2%',
                bottom: '8%'
            },
            // title: {
            //   text: '平台核销总金额月统计',
            //   fontSize: 14
            // },
            tooltip: {
                trigger: 'axis'
            },
            yAxis: {
                type: 'value',
                name: '单位：次',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            visualMap: {
                orient:'horizontal',
                top: 0,
                right: 0,
                pieces: [
                    {
                        gt: 0,
                        lte: 200,
                        label:"低",
                        color: '#5cc181',
                    },
                    {
                        gt: 200,
                        lte: 400,
                        label:"中",
                        color: '#efb95e'
                    },
                    {
                        gt: 400,
                        label:"高",
                        color: '#c66259'
                    },
                ]
            },
            series: [
                {
                    symbol: 'none',
                    data: getRandomArray(7,50,500),
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        // 设置折线图区域填充样式
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0, // 渐变的起始位置 (横坐标)
                                y: 0, // 渐变的起始位置 (纵坐标)
                                x2: 0, // 渐变的结束位置 (横坐标)
                                y2: 1, // 渐变的结束位置 (纵坐标)
                                colorStops: [
                                    // 定义渐变的颜色位置
                                    {
                                        offset: 0,
                                        color: 'rgba(0,0,0, 0.15)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0, 0, 0, 0)'
                                    }
                                ],
                                global: false // 是否为全局渐变
                            }
                        }
                    },
                    // lineStyle: {
                    //     color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    //         { offset: 0, color: '#53b672' }, // 渐变起始颜色
                    //         { offset: 1, color: '#ee7f51' } // 渐变结束颜色
                    //     ]),
                    //     width: 3 // 设置线条宽度
                    // }
                }
            ]
        }

        option && myChart.setOption(option, true)
    }

    useEffect(() => {

        // 要观察尺寸变化的元素
        let timer = setTimeout(() => {
            chartsInit();
        }, 200)
        return () => {
            clearTimeout(timer);
        }
    }, [])


    return (
        <div className="contact">
            <div className="number_statistics">
                <Row gutter={20}>
                    {
                        numStatistics.map((item: any, index: number) => {
                            return (
                                <Col span="6" key={index}>
                                    <Card hoverable>
                                        <Flex justify='space-between' align='center'>
                                            <img className="icon-defalut-size"
                                                 src={item.img}
                                                 alt=""/>
                                            <Space direction="vertical" className="text-center text-user-select-none">
                                                <span className="title">{item.title}</span>
                                                <span className="text-big-size value">{item.value}</span>
                                            </Space>
                                        </Flex>
                                    </Card>
                                </Col>
                            )
                        })
                    }
                </Row>
            </div>
            <div className="charts">
                <div className="chat">
                    <Paragraph>
                        <blockquote>
                            <Title level={4}>近七天博客访问量</Title>
                        </blockquote>
                    </Paragraph>
                    <div id="visitorPv" ref={visitorPv}></div>
                </div>
                <div className="chat">
                    <Paragraph>
                        <blockquote>
                            <Title level={4}>近七天用户活跃度</Title>
                        </blockquote>
                    </Paragraph>
                    <div></div>
                </div>

            </div>
            <div className="chart">
                <Paragraph>
                    <blockquote>
                        <Title level={4}>近七天文章访问统计图</Title>
                    </blockquote>
                </Paragraph>
                <div id="articlePv" ref={articlePv}></div>
            </div>

        </div>
    );
}

export default ArticleList;
